<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/detail.css">
    <link rel="stylesheet" href="../css/banner.css">
    <link rel="stylesheet" href="../css/footer.css">
    <link rel="stylesheet" href="../iconfont/iconfont.css">
</head>

<body>
    <!-- 导航栏 -->
    <nav class="xtxNav">
        <div class="xtxLogin w">
            <ul>
                <li><a href="#">请先登录</a></li>
                <li><a href="#">免费注册</a></li>
                <li><a href="#">我的订单</a></li>
                <li><a href="#">会员中心</a></li>
                <li><a href="#">帮助中心</a></li>
                <li><a href="#">关注我们</a></li>
                <li><i class="iconfont icon-shouji"></i> <a href="#">手机版</a></li>
            </ul>
        </div>
    </nav>
    <!-- 首页 -->
    <div class="xtxHomepage w">
        <div class="page">
            <div class="topLogo">
                <h1>
                    <a href="#"><img src="../image/logo.png" alt=""></a>
                </h1>
            </div>
            <div>
                <ul>
                    <li><a href="../html/header.html" class="active">首页</a></li>
                    <li>
                        <a href="#">居家</a>
                    </li>
                    <li><a href="#">美食</a></li>
                    <li><a href="#">服饰</a></li>
                    <li><a href="#">母婴</a></li>
                    <li><a href="#">个护</a></li>
                    <li><a href="#">严选</a></li>
                    <li><a href="#">数码</a></li>
                    <li><a href="#">运动</a></li>
                    <li><a href="#">杂项</a></li>
                </ul>
            </div>
            <div class="disabled">
                <div class="shoppingTop">
                    <div class="search">
                        <i class="iconfont icon-RectangleCopy"></i>
                        <input type="text" placeholder="搜一搜">

                    </div>
                    <div class="font">
                        <a href="#" class="goods-inconfont">
                            <i class="iconfont icon-gouwuchekong"></i>
                            <em>3</em>
                        </a>
                    </div>
                </div>

                <div class="box">
                    <div class="triangle"></div>
                    <div class="list">
                        <div class="item">
                            <a href="#">
                                <img src="https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png"
                                    alt="">
                                <div class="center">
                                    <p class="name">大师监制龙泉青瓷茶叶罐</p>
                                    <p class="attr">规格:中号</p>
                                </div>
                                <div class="right">
                                    <p class="price">￥239.00</p>
                                    <p class="count">x1</p>
                                </div>
                            </a>
                            <i class="iconfont icon-chahao"></i>
                        </div>
                        <div class="item">
                            <a href="#">
                                <img src="https://yanxuan-item.nosdn.127.net/c09706c1e85dd2f5c9886b4f3e0cbbf0.png"
                                    alt="">
                                <div class="center">
                                    <p class="name">让全家人喝上甜甜的水黑科技镁离子净水壶</p>
                                    <p class="attr">颜色:【半年版-白色】1壶9芯（适用6~9个月）</p>
                                </div>
                                <div class="right">
                                    <p class="price">¥448.00</p>
                                    <p class="count">x1</p>
                                </div>
                            </a>
                            <i class="iconfont icon-chahao"></i>
                        </div>
                        <div class="item">
                            <a href="#">
                                <img src="https://yanxuan-item.nosdn.127.net/9208f2df07d79dd39fb9f5eaf9ca95c6.png"
                                    alt="">
                                <div class="center">
                                    <p class="name">匠心手工羊脂玉白茶具礼盒6件套</p>
                                    <p class="attr">规格:1*壶；1*公道杯；4*品茗杯</p>
                                </div>
                                <div class="right">
                                    <p class="price">￥339.00</p>
                                    <p class="count">x1</p>
                                </div>
                            </a>
                            <i class="iconfont icon-chahao"></i>
                        </div>
                    </div>
                    <div class="foot">
                        <div class="total">
                            <p class="goodsTotal">共3件商品</p>
                            <p class="price">￥1026</p>
                        </div>
                        <button>去购物车结算</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="xtxDetail w">
        <div class="xtxAside">
            <div class="aside">
                <ul>
                    <h3>我的账户</h3>
                    <li><a href="#" class="lightLi">个人中心</a></li>
                    <li><a href="#">消息通知</a></li>
                    <li><a href="#">个人信息</a></li>
                    <li><a href="#">安全设置</a></li>
                    <li><a href="#">地址管理</a></li>
                    <li><a href="#">我的积分</a></li>
                    <li><a href="#">我的足迹</a></li>
                    <li><a href="#">邀请有礼</a></li>
                    <li><a href="#">幸运抽奖</a></li>
                </ul>
                <ul>
                    <h3>交易管理</h3>
                    <li><a href="#">我的订单</a></li>
                    <li><a href="#">优惠卷</a></li>
                    <li><a href="#">礼品卡</a></li>
                    <li><a href="#">评价晒单</a></li>
                    <li><a href="#">售后服务</a></li>
                </ul>
                <ul>
                    <h3>我的收藏</h3>
                    <li><a href="#">收藏的商品</a></li>
                    <li><a href="#">收藏的专题</a></li>
                    <li><a href="#">关注的品牌</a></li>
                </ul>
                <ul>
                    <h3>帮助中心</h3>
                    <li><a href="#">帮助中心</a></li>
                    <li><a href="#">在线客服</a></li>
                </ul>

                </ul>
            </div>
        </div>
        <article class='article'>
            <div class="action">
                <div class="state">
                    <span class="iconfont icon-querenanniu"></span>
                    <p>待付款</p>
                </div>
                <div class="info">
                    <p>订单编号：1651428057535348738</p>
                    <p>下单时间：2023-04-27 11:28:26</p>
                </div>
                <div class="btn">
                    <a href="../html/payMent.html"><button id="btnOne">立即付款</button></a>
                    <button id="btnTwo">取消订单</button>
                </div>
            </div>
            <div class="step">
                <div class="steps">
                    <div class="stepsItem">
                        <p class="list">
                            <span class="first">1</span>
                        </p>
                        <p class="titles">提交订单</p>
                        <p class="desc">2023-04-27 11:28:26</p>
                    </div>
                    <div class="stepsItem">
                        <p class="list">
                            <span>2</span>
                        </p>
                        <p class="title">付款成功</p>
                    </div>
                    <div class="stepsItem">
                        <p class="list">
                            <span>3</span>
                        </p>
                        <p class="title">商品发货</p>
                    </div>
                    <div class="stepsItem">
                        <p class="list">
                            <span>4</span>
                        </p>
                        <p class="title">确认收货</p>
                    </div>
                    <div class="stepsItem">
                        <p class="list">
                            <span>5</span>
                        </p>
                        <p class="title">订单完成</p>
                    </div>
                    <div class="border"></div>
                </div>
            </div>
            <div class="foot">
                <h3>订单商品</h3>
                <table class="goodsTable">
                    <thead>
                        <tr>
                            <th>商品信息</th>
                            <th>单价</th>
                            <th>数量</th>
                            <th>总计</th>
                            <th>实付</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- <tr>
                            <td>
                                <a href="#">
                                    <img src="https://yanxuan-item.nosdn.127.net/221317c85274a188174352474b859d7b.jpg"
                                        alt="">
                                    <div class="info">
                                        <p class="name">全防水HABU旋钮牛皮户外徒步鞋山宁泰抗菌</p>
                                        <p class="attrs">颜色:骑士黑 尺码:39 </p>
                                    </div>
                                </a>
                            </td>
                            <td>￥444</td>
                            <td>1</td>
                            <td>￥444</td>
                            <td>￥444</td>
                        </tr>  -->
                    </tbody>
                </table>
                <h3>收货信息</h3>
                <div class="infoBox">
                    <div class="infoList">
                        <ul>
                            <li>收&nbsp;&nbsp;获&nbsp;&nbsp;人:</li>
                            <li>1</li>
                        </ul>
                    </div>
                    <div class="infoList">
                        <ul>
                            <li>联系方式:</li>
                            <li>189****0000</li>
                        </ul>
                    </div>
                    <div class="infoList">
                        <ul>
                            <li>收获地址:</li>
                            <li>安徽省合肥市瑶海区1</li>
                        </ul>
                    </div>
                </div>
                <h3>收获方式及送货时间</h3>
                <div class="infoBox">
                    <div class="infoList">
                        <ul>
                            <li>支付方式:</li>
                            <li>支付宝</li>
                        </ul>
                    </div>
                    <div class="infoList">
                        <ul>
                            <li>送货时间</li>
                            <li>双休日、假日送货(适合于家庭地址)</li>
                        </ul>
                    </div>
                </div>
                <h3>发票信息</h3>
                <div class="infoBox">
                    <div class="infoList">
                        <ul>
                            <li>发票类型:</li>
                            <li>电子发票</li>
                        </ul>
                    </div>
                    <div class="infoList">
                        <ul>
                            <li>发票内容</li>
                            <li>日用品</li>
                        </ul>
                    </div>
                    <div class="infoList">
                        <ul>
                            <li>发票抬头</li>
                            <li>个人</li>
                        </ul>
                    </div>
                </div>
                <h3>订单信息</h3>
                <div class="infoBox">
                    <div class="infoList">
                        <ul>
                            <li>订单编号:</li>
                            <li>在线支付</li>
                        </ul>
                    </div>
                    <div class="infoList">
                        <ul>
                            <li>下单时间</li>
                            <li>2023-04-27 11:28:26</li>
                        </ul>
                    </div>
                </div>
                <div class="sumInfo">
                    <div class="info">
                        <div class="item">
                            <span>商品件数：</span>
                            <span>9件</span>
                        </div>
                        <div class="item">
                            <span>商品总价：</span>
                            <span>￥934.8</span>
                        </div>
                        <div class="item">
                            <span>运&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;费：</span>
                            <span>9</span>
                        </div>
                        <div class="item">
                            <span>应付总额：</span>
                            <span class="price">￥934.8</span>
                        </div>
                    </div>
                </div>
            </div>
        </article>
    </div>
    <!-- 尾部 -->
    <footer class="footer">
        <div class="contact">
            <div class="container w">
                <ul>
                    <li>
                        <p>客户服务</p>
                        <em>
                            <i class="iconfont icon-tubiao-weixin"></i>
                            在线客服
                        </em>
                        <em>
                            <i class="iconfont icon-yiwenwenhaoduihuakuangjiedamianxing"></i>
                            问题反馈
                        </em>
                    </li>
                    <li>
                        <p>关注我们</p>
                        <em>
                            <i class="iconfont icon-weixin1"></i>
                            公众号
                        </em>
                        <em>
                            <i class="iconfont icon-weibo"></i>
                            微博
                        </em>
                    </li>
                    <li>
                        <p>下载APP</p>
                        <em>
                            <img src="http://erabbit.itheima.net/img/qrcode.5372a064.jpg" alt="">
                        </em>
                        <div>
                            <p>扫描二维码</p>
                            <p>立马下载APP</p>
                            <a href="#">下载页面</a>
                        </div>
                    </li>
                    <li>
                        <p>服务热线</p>
                        <div>
                            <p>400-0000-000</p>
                            <p>周一至周日 8:00-18:00</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="extra">
            <div class="container w">
                <div class="slogan">
                    <a href="#">
                        <span></span>
                        <span>价格亲民</span>
                    </a>
                    <a href="#">
                        <span></span>
                        <span>物流快捷</span>
                    </a>
                    <a href="#">
                        <span></span>
                        <span>品质新鲜</span>
                    </a>
                </div>
                <div class="copyright">
                    <p>
                        <a href="#">关于我们</a>
                        <a href="#">帮助中心</a>
                        <a href="#">售后服务</a>
                        <a href="#">验送与验收</a>
                        <a href="#">商务合作</a>
                        <a href="#">搜索推荐</a>
                        <a href="#">友情链接</a>
                    </p>
                    <p>CopyRight © 小兔鲜儿</p>
                </div>
            </div>
        </div>

    </footer>
    <script src="../js/detail.js"></script>
    <script src="../js/banner.js"></script>
    <script>
        document.querySelector('.aside').addEventListener('click', function (e) {
            if (e.target.tagName === 'A') {
                document.querySelector('a.lightLi').classList.remove('lightLi')
                e.target.classList.add('lightLi')
            }
        })
    </script>
</body>

</html>